<template>
	<view class="i-slider" :style="{width: width+ 'px', background: stop ? successBgolor : bgColor}">
		<text class="title" :style="{color: stop ? '#fff' : color}">{{stop ? successTitle : title}}</text>
		<view class="slider_touch" @touchstart="start" @touchmove="move" @touchend="end"
			:style="{transform: 'translateX('+ left +'px)'}" :class="{transition: transition}">
			<!-- <uni-icons  type="forward" size="20" :color="color"></uni-icons> -->
			<image v-if="!stop" src="../../static/images/goto_icon.png" mode=""></image>
			<image v-if="!stop" src="../../static/images/goto_icon.png" mode=""></image>
			<!-- <uni-icons v-if="!stop" type="forward" style="margin-left: -18rpx;" size="20" :color="color"></uni-icons> -->
			<!-- <uni-icons v-if="stop" type="checkbox" size="26" :color="successBgolor"></uni-icons> -->
			<image v-if="stop" class="stop" src="../../static/images/checked_icon.png"></image>

		</view>
	</view>
</template>

<script lang="ts" setup>
	import {
		getSystemInfoSync
	} from '../../utils/common'
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		padding: {
			type: Number,
			default: 64,
		},
		title: {
			type: String,
			default: '拖动滑块验证',
		},
		successTitle: {
			type: String,
			default: '验证通过',
		},
		color: {
			type: String,
			default: '#A0A0AD',
		},
		bgColor: {
			type: String,
			default: '#E6E6F0',
		},
		successBgolor: {
			type: String,
			default: '#FB652E',
		}

	})
	const emit = defineEmits(['success'])

	const left = ref(0)
	const stop = ref(false)
	const width = ref(300)
	const transition = ref(false)

	const {
		screenWidth
	} = getSystemInfoSync()

	width.value = screenWidth - props.padding

	const start = (e) => {
		transition.value = false
	}
	const move = (e) => {
		if (stop.value) {
			return
		}

		if (e.touches[0].clientX - 60 <= 0) {
			left.value = 0
			return
		}
		if (e.touches[0].clientX > width.value) {
			left.value = width.value - 64
			stop.value = true
			emit('success')
			return
		}

		left.value = e.touches[0].clientX - 64
	}

	const end = (e) => {
		if (!stop.value) {
			transition.value = true
			left.value = 0

		}

	}
</script>

<style lang="scss" scoped>
	.i-slider {
		height: 88rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: relative;
		transition: all ease-out 0.3s;
		overflow: hidden;

		.title {
			font-size: 28rpx;
			font-weight: bold;
			color: #A0A0AD;
			transition: all ease-out 0.3s;
		}

		.slider_touch {
			position: absolute;
			width: 60px;
			height: 80rpx;
			top: 4rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			left: 2px;
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			image {
				// width: 48rpx;
				width: 22rpx;
				height: 32rpx;
			}
			.stop {
				width: 48rpx;
				height: 48rpx;
			}

		}

		.transition {
			transition: all ease-out 0.5s;
		}
	}
</style>